<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>用户交互动态展示信息特效</title>
		<!--框架必需start-->
		<script type="text/javascript" src="../../libs/js/jquery.js"></script>
		<script type="text/javascript" src="../../libs/js/language/cn.js"></script>
		<script type="text/javascript" src="../../libs/js/framework.js"></script>
		<link href="../../libs/css/import_basic.css" rel="stylesheet" type="text/css" />
		<link rel="stylesheet" type="text/css" id="skin" prePath="../../" />
		<link rel="stylesheet" type="text/css" id="customSkin" />
		<!--框架必需end-->
		<script src="../../libs/js/graphical/jquery.SuperSlide.2.1.1.js" type="text/javascript" charset="utf-8"></script>
		<!--[if IE]><script type="text/javascript" src="../../libs/js/graphical/excanvas.js" ></script><![endif]-->
		<script src="../../libs/js/graphical/ribs.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			/**common*/
			
			.ribs .fl {
				float: left;
			}
			
			.ribs .fr {
				float: right;
			}
			
			.ribs .clearfix {
				overflow: hidden;
			}
			
			.text-overflow-fag {
				display: block;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
			}
			/**ribs*/
			
			.ribs {
				position: relative;
				height: 100%;
				min-width: 750px;
				min-height: 550px;
			}
			
			.ribs .ribs-wrap {
				width: 100%;
				height: 100%;
				overflow: hidden;
			}
			/**colControlled*/
			
			.ribs .colControlled {
				width: 23%;
				height: 100%;
			}
			
			.ribs .colControlled ul,
			.ribs .colUncontrolled ul {}
			
			.ribs .colControlled ul li,
			.ribs .colUncontrolled ul li {
				display: block;
				overflow: hidden;
				position: relative;
				/*padding: 1% 0 0 0;**/
			}
			
			.ribs .colControlled ul li div {
				float: right;
			}
			
			.ribs .colControlled ul li span,
			.ribs .colUncontrolled ul li span {}
			
			.ribs .colControlled ul li .icon,
			.ribs .colUncontrolled ul li .icon {
				display: block;
				width: 50px;
				height: 50px;
			}
			
			.ribs .colControlled ul li .title,
			.ribs .colUncontrolled ul li .title {
				position: absolute;
				right: 0;
				display: none;
				padding: 0 20px;
				height: 50px;
			}
			
			.ribs .colControlled ul li.active:hover,
			.ribs .colUncontrolled ul li.active:hover {
				cursor: pointer;
			}
			
			.ribs .colControlled ul li.active .icon,
			.ribs .colUncontrolled ul li.active .icon {
			}
			/**财产子项 数量*/
			
			.ribs .colControlled ul li.active .title {}
			
			.ribs .colUncontrolled ul li.active .title {}
			
			.ribs .colControlled ul li.active .title,
			.ribs .colUncontrolled ul li.active .title {
				background: url(../../sample_html/graphical/relation/bg_number.png) no-repeat left 6px;
				color: white;
				display: block;
				right: 35px;
				z-index: -1;
			}
			
			.ribs .colUncontrolled ul li.active .title {
				position: relative;
				right: 18px;
				background-position-x: right;
			}
			
			.ribs .colControlled ul li .title .name,
			.ribs .colUncontrolled ul li .title .name {
				white-space: nowrap;
				display: block;
				margin-top: 6px;
				font-size: 12px;
				line-height: 16px;
			}
			
			.ribs .colControlled ul li .title .name {
				text-align: right;
			}
			
			.ribs .colControlled ul li .title .num,
			.ribs .colUncontrolled ul li .title .num {
				white-space: nowrap;
				font-size: 20px;
				display: block;
				line-height: 1;
			}
			
			.ribs .colControlled ul li .title .num {
				text-align: right;
			}
			
			.ribs .colControlled ul li.active .title .num,
			.ribs .colUncontrolled ul li.active .title .num {
				visibility: visible;
			}
			/**colUncontrolled*/
			
			.ribs .colUncontrolled {
				width: 25%;
				height: 100%;
				position: absolute;
				left: 75%;
				top: 0;
			}
			
			.ribs .colUncontrolled ul {}
			
			.ribs .colUncontrolled ul li {}
			
			.ribs .colUncontrolled ul li span {}
			
			.ribs .colUncontrolled ul li .icon {}
			
			.ribs .colUncontrolled ul li .num {}
			
			.ribs .colUncontrolled ul li.fc .icon,
			.ribs .colControlled ul li.fc .icon {
				background: url(../../sample_html/graphical/relation/fc.png) no-repeat;
			}
			
			.ribs .colUncontrolled ul li.cl .icon,
			.ribs .colControlled ul li.cl .icon {
				background: url(../../sample_html/graphical/relation/cl.png) no-repeat;
			}
			
			.ribs .colUncontrolled ul li.yh .icon,
			.ribs .colControlled ul li.yh .icon {
				background: url(../../sample_html/graphical/relation/yh.png) no-repeat;
			}
			
			.ribs .colUncontrolled ul li.td .icon,
			.ribs .colControlled ul li.td .icon {
				background: url(../../sample_html/graphical/relation/td.png) no-repeat;
			}
			
			.ribs .colUncontrolled ul li.swGs .icon,
			.ribs .colControlled ul li.swGs .icon {
				background: url(../../sample_html/graphical/relation/swGs.png) no-repeat;
			}
			
			.ribs .colUncontrolled ul li.swDs .icon,
			.ribs .colControlled ul li.swDs .icon {
				background: url(../../sample_html/graphical/relation/swDs.png) no-repeat;
			}
			
			.ribs .colUncontrolled ul li.gs .icon,
			.ribs .colControlled ul li.gs .icon {
				background: url(../../sample_html/graphical/relation/gs.png) no-repeat;
			}
			/**active样式*/
			
			.ribs .colUncontrolled ul li.active.fc .icon,
			.ribs .colControlled ul li.active.fc .icon {
				background: url(../../sample_html/graphical/relation/fc_on.png) no-repeat;
			}
			
			.ribs .colUncontrolled ul li.active.cl .icon,
			.ribs .colControlled ul li.active.cl .icon {
				background: url(../../sample_html/graphical/relation/cl_on.png) no-repeat;
			}
			
			.ribs .colUncontrolled ul li.active.yh .icon,
			.ribs .colControlled ul li.active.yh .icon {
				background: url(../../sample_html/graphical/relation/yh_on.png) no-repeat;
			}
			
			.ribs .colUncontrolled ul li.active.td .icon,
			.ribs .colControlled ul li.active.td .icon {
				background: url(../../sample_html/graphical/relation/td_on.png) no-repeat;
			}
			
			.ribs .colUncontrolled ul li.active.swGs .icon,
			.ribs .colControlled ul li.active.swGs .icon {
				background: url(../../sample_html/graphical/relation/swGs_on.png) no-repeat;
			}
			
			.ribs .colUncontrolled ul li.active.swDs .icon,
			.ribs .colControlled ul li.active.swDs .icon {
				background: url(../../sample_html/graphical/relation/swDs_on.png) no-repeat;
			}
			
			.ribs .colUncontrolled ul li.active.gs .icon,
			.ribs .colControlled ul li.active.gs .icon {
				background: url(../../sample_html/graphical/relation/gs_on.png) no-repeat;
			}
			/**colPerson*/
			
			.ribs .colPerson {
				width: 50%;
				height: 100%;
				position: absolute;
				left: 25%;
				top: 0;
			}
			
			.ribs .colPerson .hd {
				text-align: center;
				height: 50px;
			}
			
			.ribs .colPerson .hd .title {
				position: relative;
				bottom: -30px;
				padding: 0 8%;
				color: #545454;
			}
			
			.ribs .colPerson .hd .prev,
			.ribs .colPerson .hd .next {
				position: relative;
				bottom: -25px;
				display: inline-block;
				width: 30px;
				height: 30px;
				background: url(../../sample_html/graphical/relation/icon.png) no-repeat 6px 12px;
				cursor: pointer;
			}
			
			.ribs .colPerson .hd .prev:hover,
			.ribs .colPerson .hd .next:hover {
				background-position-y: -14px;
			}
			
			.ribs .colPerson .hd .next {
				top: -14px;
			}
			
			.ribs .colPerson .hd .next,
			.ribs .colPerson .hd .next:hover {
				background-position-x: -36px;
			}
			/**纵轴、上下箭头*/
			
			.ribs .colPerson .content .yAxis {
				position: absolute;
				top: 0;
				left: 50%;
				z-index: -1;
				height: 100%;
				border-left: 1px solid #959595;
			}
			
			.ribs .colPerson .content {
				position: relative;
				padding: 20px;
			}
			
			.ribs .colPerson .content ul {}
			
			.ribs .colPerson .content ul li {
				position: relative;
				display: block;
				text-align: center;
			}
			
			.ribs .colPerson .content ul li * {
				vertical-align: middle;
			}
			
			.ribs .colPerson .content ul li .count {
				font-size: 14px;
				font-weight: normal;
				color: #3399FF;
				width: 70px;
				display: inline-block;
				text-align: center;
			}
			
			.ribs .colPerson .content ul li .count.controlled {}
			
			.ribs .colPerson .content ul li .name {
				width: 45%;
				display: inline-block;
			}
			
			.ribs .colPerson .content ul li .name .line {
				display: inline-block;
				width: 20%;
				height: 1px;
				border-top: 1px dashed #CED0CD;
			}
			
			.ribs .colPerson .content ul li .name .line1 {}
			
			.ribs .colPerson .content ul li .name .line2 {}
			
			.ribs .colPerson .content ul li .name .text {
				display: inline-block;
				width: 100%;
				height: 80px;
				margin: 2% 0;
				background: url(../../sample_html/graphical/relation/bg_person.png) no-repeat center 8px;
				font-size: 16px;
				line-height: 80px;
			}
			
			.ribs .colPerson .content ul li .count.uncontrolled {}
			
			.ribs .colPerson .content ul li .name .text:hover {

				cursor: pointer;
			}
			
			.ribs .colPerson .content ul li .count:hover {
				cursor: pointer;
				color: #3399FF!important;
			}
			
			.ribs .colPerson .content ul li.active {}
			
			.ribs .colPerson .content ul li.active .count.active {
				color: #3399FF;
			}
			
			.ribs .colPerson .content ul li.active .name {}
			
			.ribs .colPerson .content ul li.active .name .line {}
			
			.ribs .colPerson .content ul li.active .name .text {
				color: #3399FF;
			}
			/**canvas 线*/
			
			.ribs canvas {
				position: absolute;
				top: 0;
				z-index: -2;
			}
		</style>
		<script>
			var mydata = [{
				"dsr": { "name": "北京引领视觉科技有限公司", "sfzjhm": "232103198903061222" },
				"controlled": { "yh": 1, "fc": 10, "cl": 3 },
				"uncontrolled": { "yh": 132 }
			}, {
				"dsr": { "name": "北京引领视觉科技有限公司", "sfzjhm": "232103198903061222" },
				"controlled": { "yh": 14, "fc": 523413, "cl": 3, "gs": 2, "swDs": 15, "swGs": 2, "td": 25 },
				"uncontrolled": { "yh": 1 }
			}, {
				"dsr": { "name": "北京引领视觉科技有限公司", "sfzjhm": "232103198903061222" },
				"controlled": { "yh": 3, "fc": 4358, "cl": 3, "swGs": 2, "td": 3 },
				"uncontrolled": { "gs": 2, "swDs": 15, "swGs": 2, "td": 3 }
			}, {
				"dsr": { "name": "北京引领视觉科技有限公司", "sfzjhm": "232103198903061222" },
				"controlled": { "gs": 2, "swDs": 15, "swGs": 2, "td": 3 },
				"uncontrolled": { "yh": 1, "fc": 100, "cl": 3 }
			}, {
				"dsr": { "name": "北京引领视觉科技有限公司", "sfzjhm": "232103198903061222" },
				"controlled": { "yh": 3, "fc": 20045, "cl": 3, "gs": 2, "td": 3 },
				"uncontrolled": { "yh": 1 }
			}];
			$(function() {
				//首页
				$(".ribs").ribs(mydata);

			});
		</script>
	</head>

	<body>

		<!--财产首页 排骨图-->
		<div class="ribs">
		</div>

		<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
		</div>
	</body>

</html>